<template>
  <view>
    <image src="../../image/bg.png" class="bgImg" />
    <view class="top-title" :style="{height:customBar+'px',paddingTop:statusBar+'px'}">
      <view class="top-title-back" @tap="goBack">
        <image src="../../image/back.png" />
      </view>
      <text class="top-title-t1">续费</text>
    </view>
    <view class="card-title">
      <text class="card-title-t1">储值卡</text>
      <text class="card-title-t2" >¥{{carInfos.accountBalance}}</text>
    </view>
    <view class="card">
      <image src="../../image/cardbg.png" class="img" />
      <view class="card-right">
        <view class="rt-p1"><image src="../../image/car.png" class="rt-img1"/>&nbsp;<text>{{carInfos.plates}}</text></view>
        <view class="rt-p2">{{carInfos.park.parkName||"暂无车场数据"}}</view>
        <view class="rt-p3">余额:{{carInfos.accountBalance}}元</view>
      </view>
    </view>
    <view class="title">选择充值金额</view>
    <view class="money">
      <view
        v-for="(item,index) in navTab"
        :key="index"
        @tap="currentTab(item,index)"
        :class="active==index ? 'active' : ''"
      >
        <text class="p1" v-if="item.pmr_original_price">满{{item.pmr_original_price}}送{{item.discount}}</text>
        <text class="p1" v-else>{{item.label}}</text>
      </view>
    </view>
    <view class="box1">
      <text>自定义金额</text>
      <input
        placeholder="请输入金额"
        v-model="value"
        type="digit"
        class="inp1"
        @blur="bindKeyInput(value)"
      />
    </view>
    <view class="btn" @tap="goRecharge">支付{{amount}}元</view>
  </view>
</template>
<script>
import Taro from "@tarojs/taro";
import "./storeRecharge.less";
import {setGlobalData,getGlobalData} from "../../globalData.js";
import bulterApi from '@souche2014/bulter-api';
import { request } from "../../util/axios.js";
const api = bulterApi({ partner: 'IOParking' })
// pages/card/storeRecharge.js
export default {
  data() {
    return {
      mobile: "",
      openId:"",
      navTab: [
        {
          label: "100元",
          value: 100,
          index: 0
        },
        {
          label: "200元",
          value: 200,
          index: 1
        },
        {
          label: "500元",
          value: 500,
          index: 2
        }
      ],
      active: 0,
      amount: 100,
      value: "",
      dialog1: false,
      showKeyboard: true,
      carnum: "",
      showKeyboard: false,
      addPlate: false,
      chargId:null,
      carInfos: {
        accountBalance: "",
        plates: "",
        park: {
          parkName: ""
        }
      },
      statusBar: 0,//状态栏高度
      customBar:0,//胶囊按钮高度
      apiBaseUrl: process.env.IOParking.API_HOST //请求头
    };
  },
  mounted(){
    Taro.getSystemInfo({
      success:(res)=> {
        this.statusBar = res.statusBarHeight; //状态栏高度
        let custom = Taro.getMenuButtonBoundingClientRect(); //菜单按钮
        this.customBar = custom.height+8;
        console.log(this.statusBar,this.customBar);
      }
    });
  },
  onLoad: function(options) {
    this.initData(options.id);
    this.id=options.id
  },
  methods: {
    initData: function(id) {
      var that = this;
      var base = this.apiBaseUrl;
      Taro.request({
        url: base + "/parkingpayment/getparkingtoken?id=" + id,
        header: {
          "content-type": "application/json" // 默认值
        },
        method: "GET",
        success(res) {
          if (res.data.isSuccess) {
            that.carInfos = res.data.data;
            that.chargId = res.data.data.chargId;
            that.getFeediscountinfo();
          }
        }
      });
    },
    
    getFeediscountinfo() {
      var that = this;
      var base = this.apiBaseUrl;
      let params = {
        feeId: +that.id
      };
       Taro.showLoading({
        title: "加载中",
        mask: true
      });
      Taro.request({
        url: base + "/onlinepayment/feediscountinfo",
        data: params,
        method: "POST",
        success(res) {
          Taro.hideLoading();
          if (res.data.isSuccess) {
            that.navTab = JSON.parse(res.data.data.chargStandard);
            that.amount = that.navTab[0].pmr_original_price;
          } else {
             that.amount = 100
          }
        }
      });
    },
    goRecharge: function(e) {
      var that = this;
      var base = this.apiBaseUrl;
      Taro.showLoading({
        title: "加载中",
        mask: true
      });
      Taro.request({
        url: base + "/onlinepayment/renew",
        data: {
          tokenId: that.carInfos.id,
          amount: +that.amount,
          payAmount: +that.amount,
          discountAmount: 0,
          carType: that.carInfos.type,
          startTime: "",
          endTime: "",
          parkId: that.carInfos.parkId,
          mobile: getGlobalData("mobile")||"",
          wxOpenId: getGlobalData("openId")
        },
        header: {
          "content-type": "application/json" // 默认值
        },
        method: "POST",
        success(res) {
          Taro.hideLoading();
          console.log(res);
          if (res.data.isSuccess) {
            var orderId = res.data.data.chargeOrderId;
            that.wxPay(res.data.data.wxPayOrderParams, orderId);
          } else {
            Taro.showToast({
              title: "下单失败",
              icon: "error",
              duration: 1000,
              mask: true
            });
          }
        }
      });
    },
    wxPay(obj, orderId) {
      //微信支付
      var that = this;
      Taro.requestPayment({
        timeStamp: obj.timeStamp,
        nonceStr: obj.nonceStr,
        package: obj.package,
        signType: obj.signType,
        paySign: obj.paySign,
        success(res) {
           api.bury("storedNum", {
              time: new Date().valueOf(),
              mobile: getGlobalData("mobile") || "",
              parkName:carInfos.park.parkName,
              parkId:that.carInfos.parkId
            });
          Taro.navigateTo({
            url: "../trafficManage/paySuccess?isRecharge=1"
          });
        },
        fail(res) {
          console.log(res);
        }
      });
    },
    bindKeyInput(e) {
      console.log(e);
      var re = /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/;
      if (e > 0) {
        if (re.test(e)) {
          this.value = e;
          this.amount = e;
          this.active = -1;
        } else {
          Taro.showToast({
            title: "金额不正确",
            icon: "error",
            duration: 1000,
            mask: true
          });
          this.amount = 100;
          this.value = "";
          this.active = 0;
        }
      } else {
        // Taro.showToast({
        //   title: '最低充值100',
        //   icon: 'error',
        //   duration: 1000,
        //   mask: true
        // })
          this.amount= 100
          this.value=''
          this.active=0
      }
    },
    goBack() {
      Taro.navigateBack({
        delta: 1
      });
    },
    changeTab: function(e) {
      //充值金额切换
      console.log(e.index);
      if (this.active == e.index) {
        return;
      }
      this.active = e.index;
      this.amount = e.value;
      this.value=''
    }
  }
};
</script>
